<!-- 自定义mappingId解析脚本 -->
<template>
  <pre align="left">
    本功能主要是为了方便用户可以从日志文件中解析出相对应的MappingId，这样可省去手动输入MappingId的麻烦，
    用户在启用脚本的情况下直接点击翻译按钮时则会触发此脚本自动从日志文件中解析出MappingId并自动填充
    值得注意的是，为了安全考虑，脚本只保存在本地，不会传播给其他用户
    
    脚本中可以使用到的变量有：
    “this.willRetraceLog”:表示待翻译的日志文本，字符串格式
    “this.mappingId”:需要被赋值的变量，表示mapping.txt文件的标识，字符串格式

    场景示例：
    比如我们在日志文件的首行，以空格作为分隔符，第三个参数就是mappingId,那么则可以用如下脚本解析到mappingId并为其赋值:
  </pre>
  <div style="text-align:left;line-height:30px">
    <highlightjs language="javascript" code="    let firstRow = this.willRetraceLog.split('\n')[0];//拿到首行文本
    let params=firstRow.trim().split(/\s+/); //以空格作为分隔，得到数组
    this.mappingId = params[2];//最终将解析到的mappingId赋值给this.mappingId即可" />
  </div>
  <div style="margin: 20px 0"></div>
  <el-switch v-model="scriptEnabled" active-text="启用以下脚本（启用前请记得保存）" @change="onSwitchChange">
  </el-switch>
  <div style="margin: 20px 0"></div>
  <!-- <el-input v-model="customScript" type="textarea" :rows="15" spellcheck="false"
    placeholder="请在此处编辑js脚本，以从日志文本中解析出mappingId并为其赋值"></el-input> -->
  <VueCodemirror placeholder="请在此处编辑js脚本，以从日志文本中解析出mappingId并为其赋值" :style="{ height: '300px' }" v-model="customScript"
    style="text-align:left;" />
  <div style="margin: 20px 0"></div>

  <el-button type="primary" @click="saveScript">保存脚本</el-button>
</template>
<script>
import { defineComponent } from "vue";
import Constant from "./common/constant";
export default defineComponent({
  name: "CustomMappingIdScript",
  data() {
    return {
      customScript: "", //自定义脚本字符串
      scriptEnabled: false, //是否启用脚本
    };
  },
  methods: {
    saveScript() {
      // localStorage.setItem("custom-script", this.customScript);
      localStorage.setItem(
        Constant.CUSTOM_MAPPING_ID_SCRIPT_CONTENT,
        this.customScript
      );
      this.$message.success("保存成功");
    },
    onSwitchChange(enabled) {
      // console.log(enabled);
      localStorage.setItem(Constant.CUSTOM_MAPPING_ID_SCRIPT_ENABLE, enabled);
    },
  },
  mounted() {
    console.log("mounted");
    let enable = localStorage.getItem(Constant.CUSTOM_MAPPING_ID_SCRIPT_ENABLE);
    if (enable != null) {
      if ("true" == enable) {
        this.scriptEnabled = true;
      } else {
        this.scriptEnabled = false;
      }
    }
    let script = localStorage.getItem(
      Constant.CUSTOM_MAPPING_ID_SCRIPT_CONTENT
    );
    if (script != null) {
      this.customScript = script;
    }
  },
});
</script>

<style scoped>
</style>